<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			body {
				height: 12130px;
				background: linear-gradient(#fff, #000);
			}
			
			.rokcet {
				position: fixed;
				width: 0;
				height: 249px;
				background: url(img/rocket_button_up.png) left top;
				top: 60%;
				right: 20px;
			}
			
			.rokcet:hover {
				background-position: -100% 0;
			}
			
			.rocket_run {
				animation: rocket_run .25s infinite alternate steps(4);
				-webkit-animation: rocket_run .25s infinite alternate steps(4);
			}
			
			@keyframes rocket_run {
				0% {
					background-position: -200% top;
					/*top: 50%;
					right: 20px;*/
				}
				100% {
					background-position: -600% top;
					/*top: -20%;
					right: 20px;*/
				}
			}
		</style>
		<div class="rokcet">

		</div>
		<!--
			
			请实现问题4.gif的效果
			注意:
			1.鼠标移上去火箭时会变化
			2.火箭与滚动条同时到顶(动画时间为1s),并且动画完成后,火箭会回到原位
			3.火箭升空时,有动画切换以求达到真实感觉
			4.请使用img/rocket_button_up.png进行火箭切换
		-->

		<!--
			1.如何获取滚动条的高度  scrollTop
			2.如何获取火箭的高度offsetTop
			3.火箭的动画的切换
			4.滚动条移动到最顶端
			5.火箭移动到最顶端
			6.同时到达最顶端
		-->
		<script type="text/javascript">
			var rokcet = document.querySelector(".rokcet"),
				body_top,
				rokcet_top,
				body_speed,
				rokcet_speed,
				timer;
			window.addEventListener("scroll", function() {
				var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
				if(scrollTop >= 400) {
					rokcet.style.width = "149px";
				}
				
			})
			rokcet.addEventListener("click", function() {
				body_top = document.body.scrollTop;
				rokcet_top = rokcet.offsetTop;
				body_speed = body_top / 50;
				rokcet_speed = rokcet_top / 50;
				this.classList.add("rocket_run");
				timer = setInterval(function() {
					body_top -= body_speed;
					rokcet_top -= rokcet_speed;
					document.body.scrollTop = body_top;
					rokcet.style.top = rokcet_top + "px";
					if(body_top <= 0) {
						clearInterval(timer);
						rokcet.classList.remove("rocket_run");
						rokcet.style.top = "";
					}
				}, 20)
			})
			//			var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
			//			rokcet.addEventListener("click", function() {
			//				rokcet.classList.add("rokcet_cli");
			////				rokcet.offsetTop = 0;
			//				console.log(scrollTop);
			//				var timer = setInterval(function() {
			//					var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
			//					document.documentElement.scrollTop -= 40;
			//					document.body.scrollTop -= 40;
			//					window.pageYOffset -= 40;
			//					if(scrollTop <= 0) {
			//						clearInterval(timer);
			//					}
			//				}, 20)
			//				rokcet.addEventListener("animationend", function() {
			//					rokcet.classList.remove("rokcet_cli");
			//				});
			//				console.log(rokcet.scrollTop);
			//			});
		</script>
	</body>
</html>